<template>
  <div class="all">
    <!-- 头部 -->
    <div class="header">
      <div style="font-size: 23px; color: #7232dd; margin-top: 20px">
        <el-button @click="goBack">返回</el-button>
        <span style="margin-left: 20px">订单详情</span>
      </div>
    </div>

    <!-- 分界线 -->
    <el-divider></el-divider>

    <!-- 内容展示区 -->
    <div class="order">
      <!-- 步骤条 -->
      <div class="steps">
        <div v-if="orderDataById.status === '待支付'">
          <el-steps :active="0" align-center>
            <el-step title="待支付" icon="el-icon-mobile-phone"></el-step>
            <!-- <el-step title="待发货" icon="el-icon-sell"></el-step> -->
            <el-step title="待派送" icon="el-icon-box"></el-step>
            <el-step title="派送中" icon="el-icon-truck"></el-step>
            <el-step title="待评价" icon="el-icon-edit"></el-step>
            <el-step title="已完成" icon="el-icon-circle-check"></el-step>
          </el-steps>
        </div>

        <div v-else-if="orderDataById.status === '待派送'">
          <el-steps :active="1" align-center>
            <el-step title="待支付" icon="el-icon-mobile-phone"></el-step>
            <!-- <el-step title="待发货" icon="el-icon-sell"></el-step> -->
            <el-step title="待派送" icon="el-icon-box"></el-step>
            <el-step title="派送中" icon="el-icon-truck"></el-step>
            <el-step title="待评价" icon="el-icon-edit"></el-step>
            <el-step title="已完成" icon="el-icon-circle-check"></el-step>
          </el-steps>
        </div>

        <div v-else-if="orderDataById.status === '派送中'">
          <el-steps :active="2" align-center>
            <el-step title="待支付" icon="el-icon-mobile-phone"></el-step>
            <el-step title="待发货" icon="el-icon-sell"></el-step>
            <el-step title="待派送" icon="el-icon-box"></el-step>
            <!-- <el-step title="派送中" icon="el-icon-truck"></el-step> -->
            <el-step title="待评价" icon="el-icon-edit"></el-step>
            <el-step title="已完成" icon="el-icon-circle-check"></el-step>
          </el-steps>
        </div>
        <div v-else-if="orderDataById.status === '待评价'">
          <el-steps :active="3" align-center>
            <el-step title="待支付" icon="el-icon-mobile-phone"></el-step>
            <!-- <el-step title="待发货" icon="el-icon-sell"></el-step> -->
            <el-step title="待派送" icon="el-icon-box"></el-step>
            <el-step title="派送中" icon="el-icon-truck"></el-step>
            <el-step title="待评价" icon="el-icon-edit"></el-step>
            <el-step title="已完成" icon="el-icon-circle-check"></el-step>
          </el-steps>
        </div>

        <div v-else-if="orderDataById.status === '已完成'">
          <el-steps :active="5" align-center>
            <el-step title="待支付" icon="el-icon-mobile-phone"></el-step>
            <!-- <el-step title="待发货" icon="el-icon-sell"></el-step> -->
            <el-step title="待派送" icon="el-icon-box"></el-step>
            <el-step title="派送中" icon="el-icon-truck"></el-step>
            <el-step title="待评价" icon="el-icon-edit"></el-step>
            <el-step title="已完成" icon="el-icon-circle-check"></el-step>
          </el-steps>
        </div>
      </div>
      <!-- 订单基础信息 -->
      <div class="orderXX" slot-scope="">
        <!-- 上部分 -->
        <div class="up">
          <span style="font-weight: bold"
            ><i class="el-icon-info"></i>订单编号:</span
          ><span class="span1">{{ this.$route.query.meg }}</span>
          <span style="font-weight: bold"
            ><i class="el-icon-s-order"></i>订单状态:</span
          ><span class="span2">{{ orderDataById.status }}</span>
          <span style="font-weight: bold"
            ><i class="el-icon-message-solid"></i>下单时间:</span
          ><span class="timeShow">{{
            moment(orderDataById.orderTime).format("YYYY-MM-DD :HH:mm:ss")
          }}</span>
        </div>

        <!-- 分界线 -->
        <el-divider></el-divider>

        <!-- 下部分 -->
        <div class="bottom">
          <!-- 左栏顾客信息 -->
          <div class="customer">
            <span class="span3"> 购买用户信息</span><br />
            <span class="span-left"><i class="el-icon-info"></i>客户ID：</span
            ><span class="span-right">25</span>
            <span class="span-left" style="margin-left: 150px"
              ><i class="el-icon-s-custom"></i>客户用户名:</span
            ><span class="span-right">admin1</span><br />
            <span class="span-left"
              ><i class="el-icon-user-solid"></i>客户姓名:</span
            ><span>张晓明1</span>
            <span class="span-left" style="margin-left: 105px"
              ><i class="el-icon-phone"></i>联系电话:</span
            ><span class="span-right">155788424956</span><br />
            <span class="span-left"><i class="el-icon-edit"></i>买家留言:</span
            ><span class="span-right">{{ orderDataById.buyerMessage }}</span
            ><br />
          </div>

          <!-- 分界线 -->
          <div class="line"></div>

          <!-- 地址信息 -->
          <div class="address">
            <span class="span3">收货地址信息</span><br />
            <span class="span-left"><i class="el-icon-info"></i>地址ID：</span
            ><span class="span-right">1</span>
            <span class="span-left" style="margin-left: 150px"
              ><i class="el-icon-s-custom"></i>收货人：</span
            ><span class="span-right">张晓明1</span><br />
            <span class="span-left"
              ><i class="el-icon-phone"></i>收货人电话：</span
            ><span class="span-right">155788424956</span><br />
            <span class="span-left"
              ><i class="el-icon-location"></i>收货地址：</span
            ><span class="span-right">上海市-市辖区-黄浦区-88号</span><br />
          </div>
        </div>
      </div>

      <!-- 分界线 -->
      <el-divider></el-divider>

      <!-- 商品内容表格 -->
      <div class="orderTable">
        <div
          style="
            font-size: 25px;
            font-weight: bold;
            margin-left: 60px;
            margin-bottom: 20px;
          "
        >
          商品详情
        </div>
        <el-table
          :data="orderDataById.orderLines"
          stripe
          style="width: 94%"
          class="table"
          border
        >
          <!-- 图片展示 -->
          <el-table-column
            prop="photo"
            label="商品图片"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 大图预览 -->
              <el-image
                style="height: 80px"
                :src="scope.row.photo"
                :preview-src-list="[scope.row.photo]"
              >
              </el-image>
            </template>
          </el-table-column>
          <!-- 商品名称 -->
          <el-table-column prop="" label="商品名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <!-- 商品编号 -->
          <el-table-column prop="" label="商品编号" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.productId }}
            </template>
          </el-table-column>
          <!-- 单价 -->
          <el-table-column prop="" label="单价" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}<span style="font-size: 15px">元</span>
            </template>
          </el-table-column>
          <!-- 数量 -->
          <el-table-column prop="" label=" 数量" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <!-- 应付金额 -->
          <el-table-column prop="" label="应付金额" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}<span style="font-size: 15px">元</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 价格汇总 -->
        <div class="money">
          <div
            style="
              font-size: 25px;
              font-weight: bold;
              margin-left: 20px;
              margin-top: 20px;
              color: rgba(255, 0, 0, 0.712);
            "
          >
            总价:
            <span style="margin-left: 5px">{{ orderDataById.total }}</span>
            <span style="font-size: 15px; margin-right: 30px">元</span>
            <!-- 派送按钮 -->
            <span
              ><el-button
                type="primary"
                @click="pansong"
                v-if="orderDataById.status == '待派送'"
                >派送该订单</el-button
              ></span
            >
            <!-- 删除按钮 -->
            <!-- <span
              ><el-button type="danger" @click="delorder"
                >删除该订单</el-button
              ></span
            > -->
          </div>
        </div>
        <!-- 底部高度 -->
        <div style="height: 40px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
var moment = require("moment");
export default {
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {
    ...mapState("order", ["orderDataById"]),
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getOrderData();
  },
  // 组件方法
  methods: {
    moment,
    ...mapActions("order", ["getOrderDataByIdVuex", "paisongVuex","delorderVuex"]),

    // 通过id查询到相应订单数据
    getOrderData() {
      let param = {
        id: this.$route.query.meg,
      };
      this.getOrderDataByIdVuex(param);
    },
    goBack() {
      this.$router.go(-1);
    },
    // 派送订单
    pansong() {
      let param = {
        id: this.$route.query.meg,
      };
      this.$confirm("是否派送该订单？", "派送订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "派送成功!",
          });
          this.paisongVuex(param);
          let t;
          clearTimeout(t);
          t = setTimeout(this.$router.go(0), 4000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 删除订单
    // delorder() {
    //   let param = {
    //     id: this.$route.query.meg,
    //   };
    //   this.$confirm("是否删除该订单？", "删除订单", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //     center: true,
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功!",
    //       });
    //       this.delorderVuex(param);
    //       this.$router.go(-1)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消操作",
    //       });
    //     });
    // },



  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
/* .all{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
} */
.header {
  padding-left: 15px;
}
.steps {
  margin-top: 40px;
  margin-bottom: 40px;
}
.orderXX {
  height: 370px;
  
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid rgb(235, 235, 235);
  background-color: rgb(253, 250, 255);
}
/* 上框样式 */
.up {
  margin-left:20px;
  font-size: 25px;
  margin-top: 20px;
  /* background-color: rgb(255, 0, 0); */
}
/* 下框样式 */
.bottom {
  margin-left: 20px;
  /* background-color: rgb(255, 0, 0); */
  display: flex;
}
.span1 {
  margin-right: 200px;
}
.span2 {
  color: rgba(255, 0, 0, 0.712);
  margin-right: 200px;
}
/* 客户框样式 */
.customer {
  width: 45%;
  /* border-right: 2px solid rgb(235, 235, 235); */
  /* background-color: rgb(37, 40, 185); */
}
/* 地址框样式 */
.address {
  /* background-color: #32cbe6; */
}
.span3 {
  font-weight: bold;
  font-size: 20px;
}
.timeShow {
  font-size: 20px;
}
.span-left {
  font-size: 20px;
  line-height: 80px;
}
.span-right {
  font-size: 17px;
}
/* 分界线样式 */
.line {
  height: 230px;
  width: 2px;
  background-color: rgb(235, 235, 235);
  margin-right: 60px;
}
/* 表格框 */
.orderTable {
  min-height: 100px;
  overflow: auto;

}
/* 表格 */
.table {
  font-size: 15px;
  margin-left: 50px;
  margin-right: 50px;
}
/* 价格 */
.money {
  height: 80px;
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid rgb(235, 235, 235);
  background-color: rgb(253, 250, 255);
}
</style>
